<template>
  <div>
    <a class="btn" @click="toggleShow">set avatar</a>
    <avatar-upload
      field="img"
      :support-format="['svg', 'png', 'jpg']"
      @crop-success="cropSuccess"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
      v-model="show"
      :radius="40"
      url="/upload"
    ></avatar-upload>
  </div>
</template>

<script lang="ts">
('use strict');
import { defineComponent } from 'vue';
import AvatarUpload from './components/avatar-upload/index.vue';
export default defineComponent({
  name: '',
  components: {
    AvatarUpload,
  },

  data() {
    return {
      show: false,
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
    cropSuccess(e) {
      console.log(e);
    },
    cropUploadSuccess(e) {
      console.log(e);
    },
    cropUploadFail(e) {
      console.log(e);
    },
  },
});
</script>
